"use client"
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';
// import required modules
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';
import {useState} from "react";
import AMapView from "@/components/AMapView";
import Image from "next/image";
const list = [
    {
        id: 1,
        title: '',
        images: ["https://swiperjs.com/demos/images/nature-1.jpg","https://swiperjs.com/demos/images/nature-2.jpg" ,"https://swiperjs.com/demos/images/nature-3.jpg" ,"https://swiperjs.com/demos/images/nature-4.jpg" ,"https://swiperjs.com/demos/images/nature-5.jpg" ,"https://swiperjs.com/demos/images/nature-6.jpg","https://swiperjs.com/demos/images/nature-1.jpg","https://swiperjs.com/demos/images/nature-2.jpg" ,"https://swiperjs.com/demos/images/nature-3.jpg" ,"https://swiperjs.com/demos/images/nature-4.jpg" ,"https://swiperjs.com/demos/images/nature-5.jpg" ,"https://swiperjs.com/demos/images/nature-6.jpg","https://swiperjs.com/demos/images/nature-1.jpg","https://swiperjs.com/demos/images/nature-2.jpg" ,"https://swiperjs.com/demos/images/nature-3.jpg" ,"https://swiperjs.com/demos/images/nature-4.jpg" ,"https://swiperjs.com/demos/images/nature-5.jpg" ,"https://swiperjs.com/demos/images/nature-6.jpg", ],
        description: ''
    }
]

export default function Page() {
    const [thumbsSwiper, setThumbsSwiper] = useState(null);
    return (
        <>
            <div className={"mx-auto max-w-7xl px-4"}>
                <div className={"text-2xl font-bold pb-3"}>自然风景</div>
                <div>
                    {
                        list.map((item,index)=>
                            <div key={index}>
                                <div>{item.title}</div>
                                <div>
                                    <Swiper
                                        spaceBetween={10}
                                        navigation={true}
                                        thumbs={{ swiper: thumbsSwiper }}
                                        modules={[FreeMode, Navigation, Thumbs]}
                                    >
                                        {
                                            item.images.map((image,index)=>
                                                <SwiperSlide key={index}>
                                                    <img src={image} alt={''} className={"object-cover rounded-xl w-full h-[600px]"} width={1280} height={300} />
                                                </SwiperSlide>
                                            )
                                        }
                                    </Swiper>
                                    <Swiper
                                        onSwiper={(v:any)=> setThumbsSwiper(v)}
                                        spaceBetween={10}
                                        slidesPerView={4}
                                        freeMode={true}
                                        watchSlidesProgress={true}
                                        modules={[FreeMode, Navigation, Thumbs]}
                                        className={"mt-4"}
                                    >
                                        {
                                            item.images.map((image,index)=>
                                                <SwiperSlide key={index}>
                                                    <img src={image} alt={''} className={"h-[100px] rounded-xl w-full object-cover"} />
                                                </SwiperSlide>
                                            )
                                        }
                                    </Swiper>
                                </div>
                            </div>
                        )
                    }
                </div>
                <div className={"text-2xl font-bold pb-3 mt-10"}>地图导览</div>
                <div>
                    <Image className={"w-full h-[300px] object-cover"} src={'/images/map-light.png'} alt={'map'} width={1280} height={300} />
                </div>
            </div>
        </>
    )
}